{% extends "base.tmpl" %}
{% block title %} Mozilla Labs : YouTube example {% endblock %}
{% block configs %}
  <script>
    var TogetherJSConfig_autoStart = true;
    var TogetherJSConfig_suppressJoinConfirmation = true;
    var TogetherJSConfig_dontShowClicks = true;
    var TogetherJSConfig_youtube = true;
  </script>
{% endblock %}

{% block body %}
  {% block styles %}
    <link rel="stylesheet" type="text/css" href="css/application.css" />
  {% endblock %}

  <div class="container"> <!-- container -->
    <div class="body-content row" id="youtube-example">
      <div class="col-md-6 col-md-offset-3">
        <div id="introduction">
          <h1>
            YouTube Together
            <a class="pull-right tjsbutton" onclick="TogetherJS(this); return false;">
              <img src="https://togetherjs.com/images/start-togetherjs-blue.png" style="width: 125px"></img>
            </a>
          </h1>
        </div>
        <div id="initial-video">
          <div class="embed-code flex-video"><iframe width="100%" height="325" src="//www.youtube.com/embed/9bZkp7q19f0" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
        </div>
        <form role="form">
          <div class="row">
            <div class="col-xs-12 labelarea">
              <div class="youtube-embed-link">
                <h4>Invite someone to watch a YouTube video together.</h4>
                <p class="youtube-embed-label">Watch a different YouTube video together! (http://youtu.be/<b>9bZkp7q19f0)</b></p>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-7 col-md-7 linkarea">
              <input type="text" class="form-control" id="video-id-input" placeholder='9bZkp7q19f0 (enter a video id)'>
            </div>
          </div>
          <button type="button" class="embed-submit-button btn btn-primary">Submit</button>
        </form>
      </div> <!-- // youtube container -->
    </div> <!-- //body-content -->
  <script type="text/javascript" src="js/application.js"></script>
  <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>

{% endblock %}
